@ts-nocheck
<template>
  <div>
    <el-form ref="form" :model="form" label-width="100px" style="text-align: left">
      <el-row>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-form-item label="起始日期">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.dateBegin" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" style="width: 100%"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-form-item label="截止日期">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.dateEnd" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" style="width: 100%"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <el-form-item label="选择列">
            <el-select v-model="selectedColumns" multiple collapse-tags placeholder="请选择需要显示的列" style="width: 100%">
              <el-option v-for="(column, index) in tableColumns" :key="index" :label="column.label" :value="index">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <div style="display: flex; justify-content: center">
            <el-button type="primary" icon="el-icon-search" @click="doQuery">检索</el-button>
            <el-button :disabled="tableData.length == 0" type="success" icon="el-icon-download" @click="exportExcel">导出
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" style="width: 100%" height="300px">
      <el-table-column v-for="columnIndex in selectedColumns" :sortable="tableColumns[columnIndex].sortable"
        :key="tableColumns[columnIndex].label" :prop="tableColumns[columnIndex].key"
        :label="tableColumns[columnIndex].label">
        <!-- :width="tableColumns[columnIndex].width>0?tableColumns[columnIndex].width:'auto'" -->
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        dateBegin: "",
        dateEnd: "",
      },
      tableData: [],
      tableColumns: [
        { label: "呼号", key: "callsign", sortable: false, width: 80 },
        { label: "公司", key: "company", sortable: false, width: 60 },
        { label: "席位", key: "seat", sortable: false, width: 60 },
        { label: "频率", key: "frequency", sortable: false, width: 80 },
        { label: "时间", key: "eventTime", sortable: false, width: 150 },
        { label: "类型", key: "errorType", sortable: false, width: 150 },
        { label: "管制席", key: "controllerName", sortable: false, width: 80 },
        {
          label: "管制席班组",
          key: "controllerGroup",
          sortable: false,
          width: 80,
        },
        {
          label: "管制席科室",
          key: "controllerOffice",
          sortable: false,
          width: 150,
        },
        { label: "协调席", key: "coordinatorName", sortable: false, width: 80 },
        {
          label: "协调席班组",
          key: "coordinatorGroup",
          sortable: false,
          width: 80,
        },
        {
          label: "协调席科室",
          key: "coordinatorOffice",
          sortable: false,
          width: 150,
        },
        { label: "描述", key: "details", sortable: false, width: 0 },
        { label: "提交时间", key: "updateTime", sortable: false, width: 150 },
      ],
      selectedColumns: [0, 1, 2, 3, 4, 5],
    };
  },
  methods: {
    clearResult() {
      this.tableData = [];
    },
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/plugins/Export2Excel.js");
        const tHeader = [];
        // 上面设置Excel的表格第一行的标题
        const filterVal = [];
        // 上面的index、nickName、name是tableData里对象的属性
        for (let i = 0; i < this.tableColumns.length; i++) {
          tHeader.push(this.tableColumns[i].label);
          filterVal.push(this.tableColumns[i].key);
        }
        const list = this.tableData; //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(
          tHeader,
          data,
          "纠正机组复诵记录导出(" +
          this.form.dateBegin +
          "至" +
          this.form.dateEnd +
          ")"
        );
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    doQuery() {
      this.clearResult();
      this.axios
        .get("./api/rectify_record_load.php", {
          params: {
            b: this.form.dateBegin,
            e: this.form.dateEnd,
          },
          timeout: 1000,
        })
        .then((response) => {
          if (response.data.status == "successed") {
            console.log("doQuery", response);
            this.tableData = response.data.content;
            this.$notify.success({
              title: "检索到" + response.data.content.length + "条记录",
            });
          } else {
            console.warn("doQuery", response);
            this.$notify.warning({ title: "未能检索到任何记录" });
          }
        })
        .catch((error) => {
          console.error("doQuery", error);
          this.$notify.error({
            title: "检索时遇到错误",
            message: JSON.stringify(error),
          });
        });
    },
  },
};
</script>